<template>
  <el-container class="layout-base" direction="vertical" v-loading="!isInited">
    <layout-header :title="title"></layout-header>
    <el-container class="layout-container">
      <!-- <el-aside width="200px" >
        <layout-menu :type="type"></layout-menu>
      </el-aside>-->
      <el-main class="layout-main">
        <div class="title">
          <el-button
            v-if="!noBack"
            type="default"
            class="back"
            icon="el-icon-arrow-left"
            size="small"
            @click="onClickBack"
          >返 回</el-button>
          {{subTitle}}
        </div>
        <slot />
        <!-- <div class="layout-content"> -->
          <router-view v-if="isInited"></router-view>
        <!-- </div> -->
        <p class="powered">Powered by 珠海乐活公社网络科技有限公司</p>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import LayoutHeader from './LayoutHeader';
import User from '@/store/user';
// import LayoutMenu from './LayoutMenu';

export default {
  components: {
    LayoutHeader,
    // LayoutMenu,
  },
  data () {
    return {
      title: '',
      subTitle: '',
      isLogin: false,
      noBack: false,
    };
  },

  watch: {
    $route () {
      this.init();
    },
  },

  computed: {
    isInited () {
      return User.isInited;
    },
  },

  created () {
    this.init();
  },

  methods: {
    init () {
      const rootMeta = this.$router.currentRoute.matched[0].meta;
      this.title = rootMeta.title;
      this.subTitle = ('title' in this.$route.meta) ? this.$route.meta.title : rootMeta.title;
      this.noBack = !!this.$route.meta.noBack;
      this.isLogin = !!(('isLogin' in this.$route.meta) ? this.$route.meta.isLogin : rootMeta.isLogin);
    },

    onClickBack () {
      this.$router.back();
    },
  },
  // computed: {

  //   title () {
  //     return ;
  //   },
  //   type () {
  //     return this.$router.currentRoute.matched[0].meta.type;
  //   },
  // },
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  color: $--color-primary;
  font-size: 24px;
  margin-bottom: 20px;
  position: relative;
}
.back {
  position: absolute;
  left: 0;
}
</style>
